<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="/css/el.css">
    <script src="/js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/el.js"></script>
    <script src="/js/axios.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            padding: 50px;
            box-sizing: border-box;
            text-align: center;
        }

        .table {
            width: 95%;
            display: inline-block;
        }

        .table .cell {
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .table .el-table .el-table__cell {
            height: 36px !important;
        }

        .tableBody {
            height: 600px;
            overflow-y: hidden;
        }

        .queryBody {
            width: 95%;
            display: inline-block;
            margin-bottom: 20px;
            text-align: left;

        }

        .queryBody .el-input {
            width: 10%;
        }

        .queryBody .el-select .el-input {
            width: 100% !important;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="queryBody">
        <el-input placeholder="请输入项目编号" v-model="project.pId"></el-input>
        <el-input placeholder="请输入项目名称" v-model="project.pName"></el-input>
        <el-select filterable clearable v-model="project.bCode" placeholder="请选择部门">
            <el-option
                    v-for="item in departments"
                    :key="item.bcode"
                    :label="item.bcode+'/'+item.bname"
                    :value="item.bcode">
            </el-option>
        </el-select>
        <el-input placeholder="请输入项目负责人" v-model="project.name"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="queryProject()">查询</el-button>
        <el-button type="danger" @click="toggleSelection(0)">批量删除项目</el-button>
        <el-button type="warning" @click="reset()">重置条件</el-button>
    </div>
    <div class="table">
        <div class="tableBody">
            <el-table ref="multipleTable" :data="projects" border @selection-change="handleSelectionChange" style="width: 100%;">
                <el-table-column type="selection" width="55" style="text-align: center;">
                </el-table-column>
                <el-table-column prop="pid" label="项目编号">
                    <template slot-scope="scope">
                        <div style="text-align: left">{{scope.row.pid}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="pname" label="项目名称">
                    <template slot-scope="scope">
                        <div style="text-align: left">{{scope.row.pname}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="level" label="级次">
                </el-table-column>
                <el-table-column prop="details" label="明细">
                    <template slot-scope="scope">
                        <el-checkbox v-model="scope.row.details===1" disabled></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column prop="state" label="启用">
                    <template slot-scope="scope">
                        <el-checkbox v-model="scope.row.state===1" disabled></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column prop="balanceDirection" label="余额方向">
                    <template slot-scope="scope">
                        <div v-if="scope.row.balanceDirection==='0'">支出</div>
                        <div v-else>收入</div>
                    </template>
                </el-table-column>
                <el-table-column prop="uname" label="项目负责人">
                </el-table-column>
                <el-table-column prop="bname" label="管理部门">
                </el-table-column>
                <el-table-column label="操作" width="270px">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                        <el-button size="mini" type="danger" @click="toggleSelection(1,scope.row)">删除</el-button>
                        <el-button size="mini" type="primary" :disabled="!(scope.row.pid.length<=5)" @click="addProject(scope.row)">新增</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="text-align: center;">
            <el-pagination @current-change="currentChange" @next-click="nextClick()" @prev-click="prevClick()" background layout="prev, pager, next" :total="total">
            </el-pagination>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: "#app",
        created(){
            this.getDepartment();
            this.getProjectList();
        },
        mounted() {
            window.addEventListener('message', this.handleMessage);
        },
        data() {
            return {
                project:{
                    bCode:'',
                    pName:'',
                    name:'',
                    pId:''
                },
                projects:[],
                departments: [],
                lock:false,
                total:0,
                currentPage:1,
                multipleSelection: []
            }
        },
        methods:{
            addProject(row){
                window.parent.postMessage({page:'addProjectPid',projectId:row.pid}, '*');
            },
            deleteProjectSingle(pId){
                const formData = new FormData();
                formData.append("pId",pId);
                if(!this.lock) {
                    this.lock = true;

                    axios.post("/project/deleteProjectSingle",formData)
                        .then((response)=>{
                            response = response.data;
                            if(response.code === 403){
                                location.href = "/page/logonPage"
                            }else if(response.code !== 200){
                                this.$message.error(response.message);
                            }else{
                                this.$message({
                                    message: '删除项目信息成功',
                                    type: 'success'
                                });
                            }
                        }).finally(() =>{
                        this.lock = false;
                        this.getProjectList();
                    })
                }
            },
            deleteProject(){
                    const formData = new FormData();
                    let pIdArray = new Map();
                    this.multipleSelection.forEach(value => {
                        var pid = value.pid;
                        if(pid.length===3){
                            pIdArray.set(pid,pid);
                        }else{
                            if(pid.length === 5){
                                if(pIdArray.get(pid.substring(0, 3))===undefined){
                                    pIdArray.set(pid,pid);
                                }
                            }else{
                                if(pIdArray.get(pid.substring(0, 5))===undefined && pIdArray.get(pid.substring(0, 3))===undefined){
                                    pIdArray.set(pid,pid);
                                }
                            }
                        }
                    })

                    for (let [key, value] of pIdArray) {
                        formData.append("pId",key);
                    }
                    if(!this.lock) {
                        this.lock = true;

                        axios.post("/project/deleteProject",formData)
                            .then((response)=>{
                                response = response.data;
                                if(response.code === 403){
                                    location.href = "/page/logonPage"
                                }else if(response.code !== 200){
                                    this.$message.error(response.message);
                                }else{
                                    this.$message({
                                        message: '删除项目信息成功',
                                        type: 'success'
                                    });
                                }
                            }).finally(() =>{
                            this.lock = false;
                            this.getProjectList();
                        })
                    }
            },
            toggleSelection(index,row){
                if(index===0) window.parent.postMessage({page:'deleteProject'}, '*');
                else window.parent.postMessage({page:'deleteProjectSingle',pId:row.pid}, '*');
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleMessage(message){
                if(message.data === "deleteProject"){
                    this.deleteProject();
                    return;
                }else if(message.data.page === "deleteProjectSingle"){
                    this.deleteProjectSingle(message.data.pId);
                    return;
                }
                this.getProjectList();
            },
            handleEdit(e1,e2){
                window.parent.postMessage({page:'updateProject',departments:this.departments,projectId:e2.pid}, '*');
            },
            reset(){
                this.project = {bCode:'', pName:'',name:''};
                this.queryProject();
            },
            queryProject(){
                this.currentPage = 1;
                this.getProjectList();
            },
            currentChange(e){
                this.currentPage = e;
                this.getProjectList();
            },
            prevClick(){
                if(this.currentPage-1 === 0){
                    return;
                }
                this.currentPage -= 1;
                this.getProjectList();
            },
            nextClick(){
                this.currentPage += 1;
                this.getProjectList();
            },
            getDepartment(){
                axios.post("/department/getDepartment")
                    .then((response)=>{
                        response = response.data;
                        if(response.code === 403){
                            location.href = "/page/logonPage"
                        }else if(response.code !== 200){
                            this.$message.error(response.message);
                        }else{
                            this.departments = response.data;
                        }
                    })
            },
            getProjectList(){
                if(!this.lock){
                    this.lock = true;

                    const formData = new FormData();
                    formData.append("pName", this.project.pName);
                    formData.append("bCode", this.project.bCode);
                    formData.append("name", this.project.name);
                    formData.append("pId", this.project.pId);
                    formData.append("current", this.currentPage);
                    axios.post("/project/getProjects",formData)
                        .then((response)=>{
                            response = response.data;
                            if(response.code === 403){
                                location.href = "/page/logonPage"
                            }else if(response.code !== 200){
                                this.$message.error(response.message);
                            }else{
                                this.projects = response.data.records;
                                this.total = response.data.total;
                            }
                        }).finally(() =>{
                        this.lock = false;
                    })
                }
            }
        }
    })
</script>
</body>
</html>